<template>
  <vxe-grid
    ref="gridRef3"
    v-bind="gridOptions2"
    @toolbar-button-click="toolbarButtonClickEvent"
    @form-submit="formSubmitEvent"
    @form-reset="formResetEvent"
  >
    <template #value_one="{ row }">
      <div class="father">
        <vxe-input v-model="row.toleranceOneDesc"></vxe-input>
      </div>
    </template>
    <template #value_1="{ row }">
      <div class="father">
        <vxe-number-input
          v-model="row.lowerToleranceOne"
          type="float"
        ></vxe-number-input>
      </div>
    </template>
    <template #value_2="{ row }">
      <!-- <vxe-input v-model="row.upperToleranceOne"></vxe-input> -->
      <vxe-number-input
        v-model="row.upperToleranceOne"
        type="float"
      ></vxe-number-input>
    </template>
    <template #value_two="{ row }">
      <div class="father">
        <vxe-input v-model="row.toleranceTwoDesc"></vxe-input>
      </div>
    </template>
    <template #value_3="{ row }">
      <vxe-number-input
        v-model="row.lowerToleranceTwo"
        type="float"
      ></vxe-number-input>
      <!-- <vxe-input v-model="row.lowerToleranceTwo"></vxe-input> -->
    </template>
    <template #value_4="{ row }">
      <vxe-number-input
        v-model="row.upperToleranceTwo"
        type="float"
      ></vxe-number-input>
    </template>
    <template #active="{ row }">
      <vxe-button
        mode="text"
        status="primary"
        content="更多填写"
        v-show="row.fillQty > 3"
        icon="vxe-icon-edit"
        @click="moreFillData(row)"
      ></vxe-button>
    </template>
  </vxe-grid>
</template>
<script>
import XEUtils, { first } from "xe-utils";
import { fi } from "element-plus/es/locale/index.mjs";
import {
  getInspectionTaskByPage,
  addInspectionTask,
  addInspectionTasks,
  delInspectionTask,
  uploadFile,
  getValueTmpByTaskId,
  fillInspectionTaskValue,
  getInspectionTaskTemplateSamplingItemByPage,
  fillInspectionSamplingTaskValue,
  fillInspectionTaskValueExt,
} from "@/api/quality/inspectionTask";
import {
  getInspectionTemplateItemMaterialByPage,
  updateInspectionTemplateItemMaterials,
} from "@/api/quality/inspectionTemplateItemMaterial";
export default {
  name: "InspectionTemplateItemMaterial",
  props: {
    materialCode: {
      type: Object,
      default: () => {
        return "";
      },
    },
  },
  watch: {
    // "rowData.id": {
    //   immediate: true,
    //   deep: true,
    //   handler(val, oldVal) {
    //     setTimeout(() => {
    //       this.selectData.id = val;
    //       this.$refs.gridRef3.commitProxy("reload");
    //     }, 100);
    //   },
    // },
  },
  data() {
    const gridOptions2 = {
      editConfig: {
        trigger: "click",
        mode: "cell",
        // beforeEditMethod({ row }) {
        //   // name 为 'x' 开头的列禁止编辑
        //   if ((row.name || "").indexOf("x") === 0) {
        //     return false;
        //   }
        //   // age 小于 27 的列禁止编辑
        //   if (row.age < 27) {
        //     return false;
        //   }
        //   // sex 值编辑为 1 的列禁止编辑
        //   if (row.sex === "Women") {
        //     return false;
        //   }
        //   return true;
        // },
      },
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,
      height: "100%",
      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      toolbarConfig: {
        refresh: true,
        import: true,
        export: true,
        print: true,
        zoom: true,
        custom: true,
        buttons: [
          { name: "保存", code: "mysave", status: "primary" },

          // { name: "保存", code: "mySave", status: "success" },
        ],
      },
      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 6,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },
          {
            field: "code",
            title: "编码",
            span: 6,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 6,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
                clearable: true,
              },
            },
          },

          {
            align: "right",
            span: 6,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        // { field: "fillType", title: "分类", width: 70 },
        {
          field: "inspectionTemplateName",
          title: "质检模板名称",
          sortable: true,
          width: 200,
        },
        {
          field: "materialCode",
          title: "物料编码",
          sortable: true,
          width: 100,
        },
        {
          field: "inspectionItemName",
          title: "质检项名称",
          sortable: true,
          width: 200,
        },
        {
          field: "standardToleranceOne",
          title: "公差1配置",

          width: 100,
        },
        {
          field: "toleranceOneDesc",
          editRender: { name: "VxeInput" },
          title: "公差1描述",

          width: 120,
          slots: { edit: "value_one" },
        },
        {
          field: "lowerToleranceOne",
          editRender: { name: "VxeInput" },
          title: "公差1下限",

          width: 120,
          slots: { edit: "value_1" },
        },
        {
          field: "upperToleranceOne",
          title: "公差1上限",
          editRender: { name: "VxeInput" },

          width: 120,
          slots: { edit: "value_2" },
        },
        {
          field: "standardToleranceTwo",
          title: "公差2配置",

          width: 100,
        },
        {
          field: "toleranceTwoDesc",
          editRender: { name: "VxeInput" },
          title: "公差2描述",

          width: 120,
          slots: { edit: "value_two" },
        },
        {
          field: "lowerToleranceTwo",
          title: "公差2下限",

          editRender: { name: "VxeInput" },
          width: 120,
          slots: { edit: "value_3" },
        },
        {
          field: "upperToleranceTwo",
          title: "公差2上限",
          editRender: { name: "VxeInput" },

          width: 120,
          slots: { edit: "value_4" },
        },
        {
          field: "failurePattern",
          title: "失效模式",

          width: 100,
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            console.log(page, sorts, form, "----");
            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getInspectionTemplateItemMaterialByPage({
              ...page,
              ...form,
              materialCode: this.localMaterialCode,
              //   inspectionTaskId: this.selectData.id,
              //   fillType: this.selectData.fillType,
            });
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    return {
      gridOptions2,
      selectData: this.rowData,
      localMaterialCode: this.materialCode,
    };
  },
  methods: {
    async toolbarButtonClickEvent(params) {
      if (params.code == "mysave") {
        try {
          await updateInspectionTemplateItemMaterials(
            this.$refs.gridRef3.getFullData()
          );
        } catch (error) {
        } finally {
          this.$refs.gridRef3.commitProxy("reload");
        }
      }
      // console.log(this.$refs.gridRef3.getFullData());
    },
    // toolbarButtonClickEvent() {},
    formSubmitEvent() {},
    formResetEvent() {},
  },
};
</script>
<style scoped lang="scss">
.father {
  display: flex;
  align-items: flex-start;
  // justify-content: center;

  // overflow: auto;
  color: red;
}
</style>
